<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_员工列表练习</title>
</head>
<body>
<input type="text" id="search" placeholder="请输入员工姓名">
<input type="text" id="salary" placeholder="请输入员工工资">
<input type="text" id="work" placeholder="请输入员工岗位">
<button onclick="add()">添加员工</button>
<br>
<hr>
<table border="1" cellspacing="0" width="200" style="text-align: center">
<!--    <tr >-->
<!--        <th colspan="3">员工表</th>-->
<!--    </tr>-->
    <caption>员工表</caption>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>岗位</th>
    </tr>
    <!--<tr id="tr">
        <td>张三</td>
        <td>10000</td>
        <td>前端工程师</td>
    </tr>-->
</table>
<script>
    // 保存添加的员工
    let arr = [];
    function add(){
        let table = document.querySelector('table');
        let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');
        let input1 = document.querySelector('#search').value;
        console.log(input1);
        let input2 = document.querySelector('#salary').value;
        console.log(input2);
        let input3 = document.querySelector('#work').value;
        console.log(input3);
        td1.innerHTML = input1;
        td2.innerHTML = input2;
        td3.innerHTML = input3;
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        console.log(tr);
        /*//td居中显示
        td1.style.textAlign = 'center';
        td2.style.textAlign = 'center';
        td3.style.textAlign = 'center';*/
        table.appendChild(tr);
        document.getElementById('search').value = '';
        document.getElementById('salary').value = '';
        document.getElementById('work').value = '';
        //添加数据
        arr.push({
            name: input1,
            salary: input2,
            work: input3
        })
        console.log(arr);
    }
</script>

</body>
</html>